<template>
	<div class="content-org" v-loading="loading">
		<div class="header">
			<span>组织机构</span>
      <span v-if="showOrgTable" class="back" style="font-size: 20px !important;cursor: pointer;" @click="onBack">返回</span>
		</div>
		<div class="org-content">
			<template v-if="!showOrgTable">
				<div v-for="item in orgList" :key="item.colId" class="org-item">
					<span class="org-name" @click="onClickOrgName">{{ item.colOrgName }}</span>
				</div>
			</template>
			<template v-else>
				<div v-for="(item,index) in orgList" :key="item.colId" :class="index%2==0?'section':'section-white'">
					<div class="left">
						{{ item.colOrgName }}
					</div>
					<div class="right">
						<!-- 人员 -->
            <el-popover
                :key="person.colId"
                v-for="person in item.userVoList"
                placement="bottom"
                :title="person.colUserName"
                width="400"
                trigger="click"
                :content="item.colOrgName+' '+person.colPhone">
<!--              <el-button slot="reference">click 激活</el-button>-->
              <span style="margin-left: 15px;cursor:pointer;font-size: 16px;color: #2c2c2c" slot="reference" >
							{{ person.colUserName }} </span>
            </el-popover>
<!--						<span v-for="person in item.userVoList" style="margin-left: 15px;cursor:pointer" :key="person.colId">
							{{ person.colUserName }}
						</span>-->
					</div>
				</div>
			</template>
		</div>

	</div>
</template>

<script>
export default {
	data() {
		return {
			query: {},
			orgList: [],
			showOrgTable: false,
			loading: false
		}
	},
	created() {
		this.getGroupInfo()
	},
	methods: {
		getGroupInfo(code) {
			this.loading = true
			this.$api.group.getOrgList().then((res) => {
				const data = res.data
				console.log('getGroupInfo', data)
				if (data.code == 200) {
					this.orgList = data.rows
				}
			}).finally(() => {
				this.loading = false
			})
		},
		onClickOrgName() {
			this.showOrgTable = true
		},
		onBack() {
			this.showOrgTable = false
		},
	},
}
</script>

<style lang="scss" scoped>
$border-t: 18px;
.content-org {
	position: relative;
	display: flex;
	flex-direction: column;
    height: 70vh;
	.header {
		display: flex;
		border-bottom: 5px solid $mainColor;
		width: 90%;
		margin-bottom: 20px;
		flex-shrink: 0;
    align-items: center;
    justify-content: space-between;


		span {
			font-size: 30px;
			color: $mainColor;
			font-weight: 700;
      font-family: 等线;
		}
	}
	.org-content {
		padding: 0 0;
		width: 100%;
		flex: 1;
		overflow-y: auto;

		.back {
			cursor: pointer;
			font-size: 20px !important;
			margin-bottom: 5px;
		}

		.org-item {
			display: flex;
			.org-name {
				display: block;
				/*color: $mainColor;*/
				font-size: 18px;
				cursor: pointer;
				margin-bottom: 15px;
        font-family: 等线;
			}

			.org-name:hover {
				border-bottom: 1px solid $mainColor;
			}
		}

		.section {
      height: 50px !important;
			display: flex;
			flex-direction: row;
			border-bottom: 2px solid black;
			align-items: center;
			width: 90%;
			background-color: rgba($color:#F5F5F5, $alpha: 1);
			.left {
				/*height: 100%;*/
				flex: 0 0 20%;
				padding: $border-t;
				border-right: 2px solid black;
			}

			.right {
				flex: 0 0 80%;
				padding: $border-t;
			}
		}

    .section-white {
      height: 50px !important;
      display: flex;
      flex-direction: row;
      border-bottom: 2px solid black;
      align-items: center;
      width: 90%;
      background-color: rgba($color: #FFFFFF, $alpha: 1);
      .left {
        /*height: 100%;*/
        flex: 0 0 20%;
        padding: $border-t;
        border-right: 2px solid black;
      }

      .right {
        flex: 0 0 80%;
        padding: $border-t;
      }
    }
	}
}
</style>
